.rui-menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  border-bottom: $menu-border-width solid $menu-border-color;
  box-shadow: $menu-box-shadow;
  padding-left: 0;
  margin-bottom: 2rem;

  &-item {
    cursor: pointer;
    padding: $menu-item-padding-y $menu-item-padding-x;
    border-bottom: $menu-item-active-border-width solid transparent;
    transition: $menu-transition;

    &-active {
      color: $menu-item-active-color;
      border-bottom: $menu-item-active-border-width solid $menu-item-active-color;
    }
    &:hover {
      border-bottom: $menu-item-active-border-width solid $menu-item-active-color;
    }

    &-disabled,
    &-disabled:hover
    {
      cursor: not-allowed;
      border-bottom: none;
      color: $menu-item-disabled-color;
    }
  }
}

.rui-submenu-arrowIcon {
  margin-left: 0.5rem;
  transition: transform .25s ease-in-out;
  &-up{
    transform: rotateX(180deg);
  }
}

.rui-menu {
  &-vertical {
    flex-direction: column;
    border-bottom: 0;
    border-right: $menu-border-width solid $menu-border-color;

    >.rui-menu-item {
      border-left: $menu-item-active-border-width solid transparent;
      border-bottom: none;

      &-active,
      &:hover {
        border-left: $menu-item-active-border-width solid $menu-item-active-color;
      }

      &-active {
        .rui-submenu {
          color: initial;
        }
        .rui-submenu-title {
          color: $menu-item-active-color;
        }
      }

      &-disabled,
      &-disabled:hover {
        border-left: $menu-item-active-border-width solid transparent;
      }
    }


    .rui-menu-item-submenu.rui-menu-item {
      padding: 0;
      border-left: $menu-item-active-border-width solid transparent;
      border-radius: $submenu-border-radius;
      .rui-submenu-title {
        padding: $menu-item-padding-y $menu-item-padding-x;
        border-radius: $submenu-border-radius;
        &:hover {
          background: $menu-item-hover-bg-color;
        }
      }

      .rui-submenu {
        padding-left: 0;
        background: $submenu-bg-color;
        border-radius: $submenu-border-radius;
        > .rui-menu-item {
          list-style: none;
          border-bottom: none;
          padding-left: 2 * $menu-item-padding-x;
          border-radius: $submenu-border-radius;
          &:hover {
            background: $menu-item-hover-bg-color;
          }
          &-active,
          &-active:hover {
            background: $menu-item-active-bg-color;
          }
          &-disabled,
          &-disabled:hover
          {
            background: none;
          }
        }
      }
    }

  }
}

.rui-menu {
  &-horizontal {
    .rui-menu-item-submenu {
      position: relative;

      &.rui-menu-item {
        border-bottom: $menu-item-active-border-width solid transparent;
        &:hover,
        &-active {
          color: initial;
          border-bottom: $menu-item-active-border-width solid $menu-item-active-color;
        }
        &-active .rui-submenu-title{
          color: $menu-item-active-color;
        }

        .rui-submenu {
          position: absolute;
          padding-left: 0;
          white-space: nowrap;
          top: calc(100% + 0.5rem);
          left: 0;
          z-index: 3;
          list-style: none;
          border: $menu-border-width solid $menu-border-color;
          border-radius: $submenu-border-radius;
          box-shadow: $menu-box-shadow;
          background: $white;

          .rui-menu-item {
            border-bottom: none;
            border-radius: $submenu-border-radius;

            &:hover {
              background: $menu-item-hover-bg-color;
            }
            &-active,
            &-active:hover {
              background: $menu-item-active-bg-color;
            }

            &-disabled,
            &-disabled:hover
            {
              background: none;
            }
          }
        }
      }
    }
  }
}
